<template>
	<view class="qilin-friendLink" :style="navCustomStyle()">
		<Qilin-Nav bgColor="qilin-bg-gradual-blue">
			<template v-slot:title>
				友情链接
			</template>
		</Qilin-Nav>
		<!-- bannar横幅图 -->
		<view class="qilin-friendLink-banner">
			<swiper 
				class="swiper"
				circular
				indicator-dots
				autoplay
				interval="3500"
			>
				<swiper-item
					class="swiper-item"
					v-for="(item,index) in bannerList"
					:key="index"
				>
					<image 
						class="swiper-item-image"
						:src="item.imageUrl"
					></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 滚动通知 -->
		<view class="qilin-friendLink-notice">
			<uv-notice-bar
				text="以下项目(排名不分先后)均为优秀公司/工作室/大佬出品的项目,强烈建议大家看看,不管是找灵感还是学习,都是不错的选择哦~"
				color="#148EFF"
				bgColor="#148eff33"
				:speed="120"
			></uv-notice-bar>
		</view>
		<!-- 友情链接 -->
		<view class="qilin-friendLink-list qilin-p-4">
			<view class="qilin-friendLink-list-item flex-row qilin-py-3"
				v-for="item in projectList"
				:key="item.id"
			>
				<view class="image qilin-p-3">
					<image :src="item.srcImage"></image>
				</view>
				<view class="item qilin-mx-3">
					<view class="item-name">{{item.projectName}}</view>
					<view class="item-description single-ellipsis qilin-mt-2">{{item.description}}</view>
				</view>
				<view class="goView qilin-bg-gradual-blue qilin-py-1 qilin-px-4" @click="goView(item.appId)">查看学习</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {reactive} from "vue";
import {navCustomStyle} from "@/utils/index.js";


/*
    响应式选项区域
*/


/*
    数据变量定义区域
*/
// banner图片数据集
const bannerList = reactive([
	{
		imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner1.png'
	}
]);
// 推荐项目数据集
const projectList = reactive([
	{
		srcImage:"https://www.uviewui.com/common/logo.png",
		projectName:"uView",
		description:"uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序，其它小程序平台的兼容可能存在一些问题，后续会针对这方面持续优化。",
		id:1,
		appId:"wxc256e348c4032ebd"
	},
	{
		srcImage:"https://www.uviewui.com/common/logo.png",
		projectName:"uv-ui",
		description:"uv-ui破釜沉舟之兼容vue3+2、nvue、app、h5、多端小程序的uni-app生态框架，大部分组件基于uView2.x，在经过改进后全面支持vue3，部分组件做了进一步的优化，支持单独导入，方便开发者选择导入需要的组件。",
		id:2,
		appId:"wxbf078f0089038cca"
	},
	{
		srcImage:"../../static/images/index/link.jpg",
		projectName:"U创流程工具",
		description:"U创流程办公工具，支持动态表单组件渲染以及便捷式审批申请操作等",
		id:3,
		appId:"wx7876eb944c3efe2b"
	},
]);


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/
// 点击查看学习按钮事件监听
const goView=(appId)=>{
	// #ifdef MP
	uni.navigateToMiniProgram({
		appId,
		fail:()=>{
			// console.log("取消");
		}
	});
	// #endif
};


/*
    生命周期等代码区域
*/


</script>

<style lang="scss" scoped>
.qilin-friendLink{
	>.qilin-friendLink-banner{
		>.swiper{
			height:400upx;
			.swiper-item{
				>.swiper-item-image{
					width:100%;
				}
			}
		}
	}
	>.qilin-friendLink-list{
		>.qilin-friendLink-list-item{
			align-items:center;
			>.image{
				>image{
					width:70upx;
					height:70upx;
					border-radius:$border-radius-circle;
				}
			}
			>view.item{
				flex:1;
				min-width:0;
				>.item-name{
					font-weight:bolder;
					font-size:30upx;
				}
				>.item-description{
					color:var(--qilin-color-info);
				}
			}
			>view.goView{
				border-radius:$border-radius-elliptic;
			}
		}
	}
}
</style>
